<template>
  <div class="login-box">
    <div class="login-left">

    </div>
    <div class="login-right">
      <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
        <h3 class="title">{{ title }}</h3>
        <el-form-item prop="username">
          <el-input
              v-model="loginForm.username"
              size="large"
              auto-complete="off"
              placeholder="账号"
          >
            <template #prefix>
              <icon-svg icon-name="User" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              v-model="loginForm.password"
              type="password"
              size="large"
              auto-complete="off"
              placeholder="密码"
          >
            <template #prefix>
              <icon-svg icon-name="Lock" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="code" v-if="captchaEnabled">
          <el-input
              v-model="loginForm.code"
              size="large"
              auto-complete="off"
              placeholder="验证码"
              class="input-code"
              @keyup.enter="handleLogin"
          >
            <template #prefix>
              <icon-svg icon-name="validCode" />
            </template>
          </el-input>
          <div class="login-code">
            <img :src="codeUrl" @click="getCode" class="login-code-img" />
          </div>
        </el-form-item>
        <div class="remember-register">
          <el-checkbox v-model="rememberMe" classs="checkbox-remember">记住密码</el-checkbox>
          <div class="remember-link" v-if="register">
            <router-link class="link-type" :to="'/register'">立即注册</router-link>
          </div>
        </div>

        <el-form-item>
          <el-button
              :loading="loading"
              size="large"
              type="primary"
              class="login-button"
              @click.prevent="handleLogin"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>

        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getCodeImgApi } from "@/api/login";
import { FormInstance } from "element-plus";

const useStore = useUserStore();

const router = useRouter();

const route = useRoute();

const title = import.meta.env.VITE_APP_TITLE;

const loading = ref(false);

const loginRef = ref<FormInstance>()

const loginForm = ref<LoginFormRecord>({
  username: "admin",
  password: "admin123",
  code: "",
  uuid: ""
});

// 验证码开关
const captchaEnabled = ref(true);

// 注册开关
const register = ref(true);

// 记住密码开关
const rememberMe = ref(false);

const codeUrl = ref("");

const loginRules = {
  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
};

function getCode() {
  getCodeImgApi().then(res => {
    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
    if (captchaEnabled.value) {
      codeUrl.value = "data:image/gif;base64," + res.img;
      loginForm.value.uuid = res.uuid;
    }
  });
}

async function handleLogin() {
  try {
    const valid = await loginRef.value.validate();
    if (rememberMe.value) {
      Cookies.set('username', loginForm.value.username, { expires: 30 });
      Cookies.set('password', encrypt(loginForm.value.password), { expires: 30 });
      Cookies.set('rememberMe', rememberMe.value, { expires: 30 });
    } else {
      Cookies.remove('username');
      Cookies.remove('password');
      Cookies.remove('rememberMe');
    }
    if (valid) {
      await useStore.login(loginForm.value)

      const redirect = route.query.redirect as string || "/"

      router.push(redirect)
    }
  } catch (err) {
    console.error(err);
  }
}

function getLoginForm() {
  rememberMe.value = !!Cookies.get('rememberMe');
  if (rememberMe.value) {
    loginForm.value.username = Cookies.get("username") || ''
    loginForm.value.password = decrypt(Cookies.get("password")) || ''
  }
}

getLoginForm();
getCode()
</script>

<style lang="scss" scoped>
.login-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/Layout/login/login-background.webp");
  background-size: cover;

  .login-left {
    flex: 1;
  }

  .login-right {
    width: 620px;

    .login-form {
      width: 400px;
      margin: auto;
      height: 420px;
      background-color: #fff;
      border-radius: 8px;
      padding: 10px 25px;

      .title {
        color: #707070;
        text-align: center;
      }

      :deep(.el-form-item) {
        width: 100%;

        .el-input {
          height: 40px;

          .input-icon {
            height: 39px;
            width: 14px;
            margin-left: 0;
          }
        }
      }

      .input-code {
        width: 200px;
      }

      .login-code {
        height: 40px;
        width: 135px;

        img {
          margin-left: 15px;
          width: 100%;
          height: 100%;
          cursor: pointer;
          vertical-align: middle;
        }
      }

      .remember-register {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        padding: 0 12px;

        .remember-link {
          margin-left: auto;
        }
      }

      .login-button {
        width: 100%;
      }
    }
  }
}
</style>